<template>
  <el-card>
    <div slot="header">
      <el-button
      @click="$router.push({
        name: 'addAdvertise'
      })">添加广告</el-button>
    </div>
    <el-table
      :data="data"
      border>
      <el-table-column
        prop="id"
        label="id">
      </el-table-column>
      <el-table-column
        prop="name"
        label="广告名称">
      </el-table-column>
      <el-table-column
        prop="spaceId"
        label="广告位置">
      </el-table-column>
      <el-table-column
        prop="img"
        label="广告图片">
        <template slot-scope="scope">
          <img :src="scope.row.img" height="80px">
        </template>
      </el-table-column>
      <el-table-column
        prop="startTime"
        label="时间">
      </el-table-column>
      <el-table-column
        prop="status"
        label="上线/下线">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
            @change="onStateChange(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="spaceKey"
        label="操作">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import { getAdList, getUpdateStatus } from '@/services/advert'

export default {
  data () {
    return {
      data: []
    }
  },
  created () {
    this.getAdLists()
  },
  methods: {
    async getAdLists () {
      const { data } = await getAdList()
      if (data.state === 1) {
        this.data = data.content
      }
    },
    // 切换上下线状态
    async onStateChange (advert) {
      const { data } = await getUpdateStatus({
        id: advert.id,
        status: advert.status
      })
      console.log(data)
    }
  }
}
</script>

<style lang='scss' scoped></style>
